<script>
export default {
  props: {
    item: Object,
  },
  methods: {
    handleMouseDown() {
      this.$refs.popover.doClose();
    }
  },
  render() {
    const { item, handleMouseDown } = this;
    return (
      <div class="d-flex fd-column pointer" style="margin: 5px 10px 5px 0">
        <el-popover ref="popover" placement="right" trigger="hover">
          <div slot="reference">
            <el-avatar shape="square" fit="cover" size={120} src={item.url}></el-avatar>
          </div>
          <el-avatar nativeOn={{mouseover: handleMouseDown, mouseenter: handleMouseDown}} shape="square" fit="cover" size={400} src={item.url}></el-avatar>
        </el-popover>
        {this.$slots.default}
      </div>
    );
  },
};
</script>

<style></style>
